<template>
  <div>
    <div class="head">{{ nickname }}</div>
    <div class="show">
      <div
        class="messageContent"
        v-for="(item, index) in messageList"
        :key="index"
      >
        <div class="detail">
          <span
            class="info"
            :style="{
              color: item.nickname === username ? 'green' : 'blue'
            }"
            >{{ nickname }} _ ( {{ item.time }} )</span
          >
          <p>{{ item.content }}</p>
        </div>
      </div>
    </div>
    <div class="input">
      <!-- 表情选择 -->
      <div class="emojiBox" v-show="emojiShow" ref="emojiBox">
        <span
          class="emoji-item"
          v-for="(item, index) in emojis"
          :key="index"
          @click="emojiInput(item)"
          >{{ item }}</span
        >
      </div>
      <div class="emoji" ref="emoji" @click="emojiChange">😀</div>
      <el-input
        style="height: 70px"
        v-model="messageForm.content"
        placeholder="请输入消息"
        @focus="emojiShow = false"
      ></el-input>
      <el-button type="primary" plain @click="clearInput" ref="input"
        >清空</el-button
      >
      <el-button
        style="margin-right: 15px"
        type="primary"
        plain
        @click="sendMessage"
        >发送</el-button
      >
    </div>
  </div>
</template>

<script>
import formmaData from '@/assets/js/moment'
let timer = null
export default {
  data () {
    return {
      username: '假面骑士kuuga',
      emojiShow: false,
      messageForm: {
        id: '',
        nickname: '假面骑士kuuga',
        content: '',
        time: '2022-10-13 12:22:12'
      },
      emojis: [
        "😀", "😁", "😂", "😃", "😄", "😅", "😆", "😉", "😊", "😋", "😎",
        "😍", "😘", "😗", "😙", "😚", "😇", "😐", "😑", "😶", "😏", "😣",
        "😥", "😮", "😯", "😪", "😫", "😴", "😌", "😛", "😜", "😝", "😒",
        "😓", "😔", "😕", "😲", "😷", "😖", "😞", "😟", "😤", "😢", "😭",
        "😦", "😧", "😨", "😬", "😰", "😱", "😳", "😵", "😡", "😠", "😈",
        "👿", "👹", "👺", "💀", "☠", "👻", "👽", "👾", "💣", "💋", "💌",
        "💘", "❤", "💓", "💔", "💕", "💖", "💗", "💙", "💚", "💛", "💜",
        "💝", "💞", "💟", "💏", "🧑‍🤝‍🧑", "💪", "👈", "👉", "☝", "👆", "👇",
        "✌", "✋", "👌", "👍", "👎", "✊", "👊", "👋", "👏", "👐", "✍"
      ],
      messageList: [
        {
          id: '221',
          nickname: '空我',
          content: `满面尘灰烟火色，两鬓苍苍十指黑。 卖炭得钱何所营？身上衣裳口中食。
            可怜身上衣正单，心忧炭贱愿天寒。 夜来城外一尺雪，晓驾炭车辗冰辙。
            牛困人饥日已高，市南门外泥中歇。 翩翩两骑来是谁？黄衣使者白衫儿。
            手把文书口称敕，回车叱牛牵向北。 一车炭，千余斤，宫使驱将惜不得。
            半匹红纱一丈绫，系向牛头充炭直。`,
          time: '2022/10/11 19:33:08',
        },
        {
          id: '221',
          nickname: '空我',
          content: `满面尘灰烟火色，两鬓苍苍十指黑。 卖炭得钱何所营？身上衣裳口中食。
            可怜身上衣正单，心忧炭贱愿天寒。 夜来城外一尺雪，晓驾炭车辗冰辙。
            牛困人饥日已高，市南门外泥中歇。 翩翩两骑来是谁？黄衣使者白衫儿。
            手把文书口称敕，回车叱牛牵向北。 一车炭，千余斤，宫使驱将惜不得。
            半匹红纱一丈绫，系向牛头充炭直。`,
          time: '2022/10/11 19:33:08',
        },
        {
          id: '221',
          nickname: '空我',
          content: `满面尘灰烟火色，两鬓苍苍十指黑。 卖炭得钱何所营？身上衣裳口中食。
            可怜身上衣正单，心忧炭贱愿天寒。 夜来城外一尺雪，晓驾炭车辗冰辙。
            牛困人饥日已高，市南门外泥中歇。 翩翩两骑来是谁？黄衣使者白衫儿。
            手把文书口称敕，回车叱牛牵向北。 一车炭，千余斤，宫使驱将惜不得。
            半匹红纱一丈绫，系向牛头充炭直。`,
          time: '2022/10/11 19:33:08',
        },
        {
          id: '221',
          nickname: '空我',
          content: `满面尘灰烟火色，两鬓苍苍十指黑。 卖炭得钱何所营？身上衣裳口中食。
            可怜身上衣正单，心忧炭贱愿天寒。 夜来城外一尺雪，晓驾炭车辗冰辙。
            牛困人饥日已高，市南门外泥中歇。 翩翩两骑来是谁？黄衣使者白衫儿。
            手把文书口称敕，回车叱牛牵向北。 一车炭，千余斤，宫使驱将惜不得。
            半匹红纱一丈绫，系向牛头充炭直。`,
          time: '2022/10/11 19:33:08',
        }

      ]
    }
  },
  props: {
    nickname: {
      type: String,
      required: true
    }
  },
  mounted () {
  },
  updated () {
    timer = setTimeout(() => {
      this.emojiShow = false
    }, 20000)
  },
  beforeDestroy () {
    clearTimeout(timer)
  },
  methods: {
    emojiChange () {
      this.emojiShow = !this.emojiShow
    },
    clearInput () {
      this.messageForm.content = ''
      // this.$refs.input.focus()
    },
    emojiInput (emoji) {
      this.messageForm.content += emoji
    },
    sendMessage () {
      if (this.messageForm.content === '') {
        this.$message.warning("消息不能为空")
        return
      }
      this.emojiShow = false
      this.messageForm.nickname = this.username
      this.messageForm.time = formmaData(new Date())
      this.messageList.push(this.messageForm)
    }
  }
}
</script>

<style lang="less" scoped>
@import url("@/assets/less/messagebox.less");
</style>